<template>
  <div :class="['login', value1 ? '' : 'login-bg']">
    <div class="logins">
      <h1
        style="text-align: center; padding-bottom: 30px"
        :class="[value1 ? '' : 'login-bg']"
      >
        五月的天
      </h1>
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="auto"
        :class="['demo-ruleForm', value1 ? '' : 'login-bg']"
      >
        <el-form-item prop="name" :class="[value1 ? '' : 'login-bg']">
          <el-input
            v-model="ruleForm.name"
            autocomplete="off"
            :prefix-icon="User"
            size="large"
            :input-style="[value1 ? '' : 'login-bg']"
          />
        </el-form-item>
        <el-form-item prop="pass" :class="[value1 ? '' : 'login-bg']">
          <el-input
            v-model="ruleForm.pass"
            type="password"
            autocomplete="off"
            size="large"
            :prefix-icon="Lock"
            :class="[value1 ? '' : 'login-bg']"
          />
        </el-form-item>
        <el-form-item prop="nums" :class="['verify', value1 ? '' : 'login-bg']">
          <el-input
            v-model.number="ruleForm.nums"
            :prefix-icon="Checked"
            size="large"
            :class="[value1 ? '' : 'login-bg']"
          />
          <img :src="imgVerify" alt="" class="verifyimg" @click="getVerify()" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm(ruleFormRef)"
            size="large"
            style="font-size: 16px"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="login-dw">
      <el-switch
        v-model="isDark"
        :active-action-icon="Moon"
        :inactive-action-icon="Sunny"
        size="large"
      />
      <el-dropdown class="el-dropdowns" trigger="click">
        <span class="el-dropdown-link">
          <img src="@/components/中文显示.png" alt="" />
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>中文</el-dropdown-item>
            <el-dropdown-item>English</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { User, Lock, Checked, Sunny, Moon } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const ruleFormRef = ref<FormInstance>();

import { loginApi, loginVerify } from "../api/auth/index";

// 暗黑模式
import { useDark, useToggle } from "@vueuse/core";
const isDark = useDark();
// const toggleDark = useToggle(isDark);

const imgVerify = ref();
const captchaKey = ref<any>();
function getVerify() {
  loginVerify().then((res) => {
    if (res.code == "00000") {
      // console.log(res.data);
      imgVerify.value = res.data.captchaBase64;
      captchaKey.value = res.data.captchaKey;
    }
  });
}
onMounted(() => {
  getVerify();
});
// const getimg = () => {
//   getVerify();
// };
const nums = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入验证码"));
  } else {
    callback();
  }
};

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    callback();
  }
};
const name = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入名称"));
  } else {
    callback();
  }
};

const ruleForm = reactive({
  pass: "",
  name: "",
  nums: "",
});

const rules = reactive<FormRules<typeof ruleForm>>({
  pass: [{ validator: validatePass, trigger: "blur" }],
  name: [{ validator: name, trigger: "blur" }],
  nums: [{ validator: nums, trigger: "blur" }],
});
let router = useRouter();
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      loginApi({
        username: ruleForm.name,
        password: ruleForm.pass,
        captchaKey: captchaKey.value,
        captchaCode: ruleForm.nums,
      }).then((res: any) => {
        // console.log(res);
        if (res.code == "00000") {
          // console.log(11111111111);
          ElMessage({
            message: res.msg,
            type: "success",
          });
          localStorage.setItem("accessToken", res.data.accessToken);
          setTimeout(() => {
            router.push("/home");
            getVerify();
          }, 500);
        }
      });
    } else {
      ElMessage.error("请输入用户名或密码！");
      getVerify();
    }
  });
};

const value1 = ref(true);
</script>

<style scoped>
.login {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-bg {
  background-color: #3e4a68;
  color: #fff;
}

.logins {
  padding: 30px;
  border: 1px solid #ccc;
  border-radius: 15px;
  box-shadow: 2px 2px 20px 2px #848484;
  width: 30%;
}
.demo-ruleForm button {
  width: 100%;
}
.login-dw {
  position: fixed;
  top: 10px;
  right: 30px;
  display: flex;
  align-items: center;
}
.el-dropdowns {
  height: 100%;
}
.el-dropdowns:hover {
  background-color: #e2e2e2;
  border: none;
}
.el-dropdown-link {
  height: 100%;
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  padding: 3px;
  border: none;
  justify-content: center;
  border-radius: 5px;
}
.el-dropdown-link img {
  width: 80%;
  height: 30%;
}
.verify {
  position: relative;
}
.verifyimg {
  position: absolute;
  height: 94%;
  top: 1px;
  right: 1px;
  cursor: pointer;
  border-radius: 5px;
}
</style>